<template>
  <div class="topic">
    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.scene_pic_url" />
        <h4>{{item.title}}</h4>
        <p class="van-ellipsis">{{item.subtitle}}</p>
        <span>{{item.price_info | yuan}}起</span>
      </li>
    </ul>
    <van-pagination v-model="page" :page-count="maxpage" mode="simple" />
  </div>
</template>
 
<script>
import { TopicAPI } from "../request/api";

export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 10,
      maxpage:2,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      TopicAPI({
        page: this.page,
        size: this.size,
      }).then((res) => {
        this.list = res.data.data;
        this.maxpage = res.data.totalPages;
        this.page = res.data.currentPage
      });
    },
  },
  watch: {
    page(val){
      this.getList();
    }
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  padding-bottom: 60px;
  ul {
    li {
      text-align: center;
      line-height: 28px;
      background: #fff;
      margin-bottom: 10px;
      padding-bottom: 5px;
      img {
        width: 100%;
      }
      span {
        color: darkred;
      }
      p {
        color: #666;
        font-size: 12px;
        padding: 0 10%;
      }
      h4 {
        font-size: 16px;
      }
    }
  }

  /deep/.van-pagination__page-desc{
    display: none;
  }
}
</style>